HTMLify

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Fira Sans', sans-serif;
}
a {
    text-decoration: none;
}

#header {
    padding-top: 50px;
    padding-bottom: 50px;
}

#header h1 {
    color: #888;
    font-size: 42px;
    font-weight: 400;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 30px;
}

#header strong {
    color: #e62cf0;
}

#header h1:hover {
    color: #313131;
}

.search-box {
    display: flex;
    justify-content: center;
    padding-left: 30px;
    padding-right: 30px;
}
.search-box .search-button {
    appearance: none;
    background: none;
    border: none;
    outline: none;
    background-color: #e62cf0;
    color: #fff;
    box-shadow: 0px 4px 8px rgba(29, 29, 29, 0.15);
    display: block;
    width: 80%;
    max-width: 120px;
    padding: 15px;
    margin-left: 16px;
    border-radius: 10px;
    font-size: 15px;
    transition: 0.4s;
}
#header .search-hint {
    color: #888;
    font-size: 20px;
    font-weight: 200;
    text-align: center;
    text-transform: capitalize;
    margin: 15px;
}

.search-box .search-field {
    appearance: none;
    background: none;
    border: none;
    outline: none;
    background-color: #F3F3F3;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
    display: block;
    width: 100%;
    max-width: 600px;
    padding: 15px;
    border-radius: 8px;
    color: #313131;
    font-size: 20px;
    transition: 0.4s;
}

.search-box :placeholder {
    color: #AAA;
}

.search-box :focus :valid {
    color: #FFF;
    background-color: #696969;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.15);
}

.main {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 30px;
    padding-right: 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    margin: 2 -8px;
}

.card {
	flex: 1 1 32%;
	width: 32%;
	max-width: 32%;
	padding: 0px 8px;
	margin-bottom: 16px;
}
.card img {
	width: 100%;
	height: 450px;
	object-fit: fill;
	border-radius: 16px;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
	transition: 0.4s;
	}
.card h3 {
	padding: 16px;
	color: #313131;
	transition: .4s;
}
.card img:hover {
	transform: scale(1.05);
}
.card h3:hover {
	color: #e62cf0;
}